<template>
  <div class="descr">
    <div class="title">
      <h3>{{ title }}</h3>
      <p style="color: #409eff; font-size: 14px; margin: 10px">{{ desc }}</p>
    </div>
    <div class="content">
      <div class="kp">
        <div class="content-ti">
          <span>效果展示</span>
        </div>
        <div class="main">
          <slot></slot>
        </div>
      </div>
      <div class="kp">
        <div class="content-ti">
          <span>实现原理</span>
        </div>
        <div class="neir" contenteditable="true" @blur="handleBlur($event)">
          <span>
            <ul>
              <li v-for="(item, index) in methodDesc" :key="index">
                {{ item }}
              </li>
            </ul></span
          >
        </div>
        <div style="float: right; margin-right: 10px">
          <el-button type="text" size="mini" @click="drawer = true"
            >详细内容</el-button
          >
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="detail">
      <el-drawer
        title="笔记"
        :visible.sync="drawer"
        :direction="direction"
        :modal="false"
        size="50%"
      >
        <markdown :notes="notes"></markdown>
        <!-- <span style="margin: 10px">
          <ul>
            <li v-for="(item,index) in notes" :key="index" style="margin:5px">{{item}}</li>
          </ul>
        </span> -->
      </el-drawer>
    </div>
  </div>
</template>
<script>
// import dragDemo from "../../pages/dragDemo/dragDemo.vue";
import markdown from "../../pages/markdown";
export default {
  name: "description",
  components: {
    // dragDemo,
    markdown,
  },
  props: {
    infos: Object,
    notes: {
      type: String,
      default: () => {
        return "## 在此写notes";
      },
    },
  },
  data() {
    return {
      message: "",
      title: "", //功能标题
      desc: "", //功能描述
      methodDesc: [], //实现原理

      drawer: false,
      direction: "rtl",
    };
  },
  mounted() {
    console.log('note',this.notes)
  },
  watch: {
    infos: {
      handler(val) {
        this.title = val.title;
        this.desc = val.desc;
        this.methodDesc = val.methodDesc;
      },
      immediate: true,
      deep: true,
    },
    notes: {
      handler(val) {
        this.notes = val
      },
      immediate: true,
    },
  },
  methods: {
    handleBlur(e) {
      let newDesc = e.target.innerText;
      console.log("newDesc", newDesc);
      this.$emit("saveEdit", newDesc);
    },
  },
};
</script>
<style scoped>
.kp {
  background-color: transparent;
  border: 1px solid #e4e4e4;
  border-radius: 5px;
  position: relative;

  margin-bottom: 20px;
}
li {
  list-style: none;
}
.content-ti {
  margin-top: 10px;
}
.content-ti::before {
  box-sizing: border-box;
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e4e4e4;

  margin-top: 10px;
}
.content-ti span {
  display: inline-block;
  position: relative;
  padding: 0 18px;
  margin-left: 30px;
  background-color: #fff;
  font-size: 14px;
}
.neir {
  box-sizing: border-box;
  padding: 20px 10px;
}
.main {
  min-height: 50px;
}
/* 清除浮动 */
.clear {
  clear: both;
}
</style>